<template>
	<view>
		<!-- 头部导航栏 -->
		<view style="
		border-bottom: solid 1rpx #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 28rpx 20rpx;
		position:fixed;
		top:0;left:0;right:0;
		height: 60px;
		z-index: 22;
		background-color: white;
		">
			<view style="position: absolute;z-index: 22;display: flex;" @click="back">
				<u-icon name="arrow-left"></u-icon>
				<view>返回</view>
			</view>
			
			<view style="font-weight: bold;position: absolute;left: 0;right: 0;height: 100%;display: flex;align-items: center;justify-content: center;">
				<view>图文管理</view>
			</view>
			
			<view @click="createPost" style="position: absolute;z-index: 22;right: 25rpx;;display: flex;align-items: center;;padding: 10rpx 25rpx;margin: 0 10rpx;border-radius: 10rpx;box-shadow: 0 0 14px 0 #66666635;border: solid 1rpx #ddd;">
				<u-icon name="plus-circle"></u-icon>
				<view style="margin-left: 10rpx;">
					新建图文 
				</view>
			</view>
		</view>
		
		<view style="padding-top: 60px;"></view>
		
		<view style="margin: 10px">
			<view v-for="(post,index) in posts">
				<view  style="border-radius: 5px;overflow: hidden;margin-bottom: 70rpx;box-shadow: 0 0 19px 1px #00000045;">
					<view style="margin: 0 20rpx;">
						<view style="display:flex;align-items: center;justify-content:space-between;margin: 20rpx 5rpx 10rpx 5rpx;font-size: 13px;">
							<view @click="onPreview(post)" style="display: flex;align-items: center;padding: 10rpx 25rpx;margin: 0 0rpx;border-radius: 10rpx;border: solid 1rpx #ddd;">
								<u-icon name="eye" color="#00c110"></u-icon>
								<view style="margin-left: 10rpx;">
									预览
								</view>
							</view>
							
							<view @click="onMore(post)"  style="display: flex;align-items: center;padding: 10rpx 25rpx;margin: 0 0rpx;border-radius: 10rpx;border: solid 1rpx #ddd;">
								<u-icon name="more-circle" ></u-icon>
								<view style="margin-left: 10rpx;">
									更多
								</view>
							</view>
						</view>
						<view style="display:flex;align-items: flex-end;justify-content:space-between;margin: 10rpx 5rpx 20rpx 5rpx;font-size: 13px;">
							<view style="color: #888;">{{'创建日期:' + $dayjs(post.created_at).format('YYYY-MM-DD HH:mm')}}</view>
							<view style="color: #888;">{{'次数:' + 5}}</view>
						</view>
					</view>
					
					<view  style="height: 150px;overflow: hidden;display: flex;align-items: center;position: relative;">
						<image style="width: 100%;" mode="widthFix" :src="absUrl(post.thumb_url)"></image>
						
						<view  style="display: flex;align-items: center;;position: absolute;left: 0;right: 0;top: 60%;bottom: 0;background-image: linear-gradient(0deg,#212121cc,#00000000);padding: 14rpx;overflow: hidden;">
							<view style="color: white;font-weight: bold;font-size: 15px">
								{{post.title}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view style="padding-top:1rpx;"></view>
		
		<u-modal :show="showComfirm" title="是否删除图文" 
			showCancelButton 
			@cancel="showComfirm=false" 
			@confirm="comfirmDelete"
			@close="showComfirm=false"
		></u-modal>
	
<!-- 		<u-action-sheet :actions="" 
			title="操作"
			round
			:show="showActions" 
			@close="showActions=false"
			@select="onSelectAction"
		></u-action-sheet> -->
		
		<uni-popup ref="share" type="share">
			<uni-popup-share title="分享到" @select="selectShare"></uni-popup-share>
		</uni-popup>
		
		<uni-popup ref="popup" :mask-click="false" is-mask-click type="bottom">
			<view style="border-radius: 5px;padding-top:10px;background-color: white;">
				<view style="display: flex;align-items: center;justify-content: center;
					padding: 10px 0;
				    border-bottom: solid 0.5px #eee;
					color: #999;
				">
					更多操作
				</view>
				<view @click="onSelectAction(item)" v-for="(item,i) in [
						{name:'转发分享',type:'share'},
						{name:'删除',type:'delete'},
					]"
					style="display: flex;align-items: center;justify-content: center;
					font-size: 18px;
					padding: 15px;
					border-bottom: solid 1rpx #eee;
					">
					{{item.name}}
				</view>
			</view>
		</uni-popup>
		
		<!-- <uni-popup ref="popup" :mask-click="false" is-mask-click type="bottom"> -->
		<u-popup :show="showShare" mode="bottom" close-on-click-overlay @close="showShare=false">
			<view style="background-color: white;border-radius: 10px 10px 0 0;">
				<view style="display: flex;justify-content: center;align-items: center;padding-top: 10px;">
					转发分享
				</view>
				
				<view style="
						background-color: white;
						display: flex;
						justify-content: space-around;
						padding: 20px 0 20px 0;
					">
					<template v-for="(item,i) in [
						{
							text: '新浪',
							icon: 'http://www.apesk.net/static/icon/qrcode.png',
							name: 'H5 二维码'
						},
						{
							text: '微信',
							icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/c2b17470-50be-11eb-b680-7980c8a877b8.png',
							name: '小程序 URL',
							disabled:true
						},
						{
							text: '支付宝',
							icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/d684ae40-50be-11eb-8ff1-d5dcf8779628.png',
							name: 'wx',
							disabled:true
						},
						{
							text: 'QQ',
							icon: 'https://vkceyugu.cdn.bspapp.com/VKCEYUGU-dc-site/e7a79520-50be-11eb-b997-9918a5dda011.png',
							name: 'qq',
							disabled:true
						}
					]">
					
						<view
							v-if="!item.disabled"
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
								justify-content: center;
							"
							@click="onShareItem(item)"
							>
							<image :src="item.icon" style="width: 30px;height: 30px;"></image>
							<view style="padding-top: 5px;">{{item.name}}</view>
						</view>
					</template>
				</view>
			</view>
		</u-popup>
		

		<!-- </uni-popup> -->
		
		<u-popup 
			:show="showQrcode" 
			mode="center" 
			:custom-style="{backgroundColor:'transparent'}"
			close-on-click-overlay
			@close="showQrcode=false"
			@click="showQrcode
		"> 
			<view style="border-radius: 10px;background-color: white;padding: 10px;" >
				<qrcode :canvasId="'qrcode2'" :data="qrcodeData"></qrcode>
			</view>
			
			<view style="
				background-color: lawngreen;
				color: white;
				border-radius: 10px;
				padding: 10px;
				font-size: 16px;
				margin: 20px 0;
				display: flex;
				justify-content: center;
				align-items: center;
			"
			@click="onSaveQrcode"
			>
				保存到相册
			</view>
		</u-popup>

	</view>
</template>

<script>
	import qrcode from './qrcode.vue'
	
	export default {
		components:{
			qrcode
		},
		async onShow() {
			await this.updateList()
			console.log('post-manager') 
			// uni.pageScrollTo({
			// 	duration: 100,
			// 	scrollTop: 100000
			// })
		},
		data() {
			return {
				moreItems:[
					{name:'删除',type:'delete'},
					{name:'转发分享',type:'share'}
				],
				showComfirm:false,
				showShare:false,
				showActions:false,
				showQrcode:false,
				
				selectPost:null,
				comfirmDeleteTask:null,
				posts:[],
				qrcodeData:'',
			}
		},
		methods: {
			async onSaveQrcode(){
				await this.saveCanvasToAlbum('qrcode2','png')
				uni.showToast({
					title:'保存成功'
				})
				
				this.showQrcode = false
			},
			selectShare(share){
				console.log(share)
			},
			onMore(post){
				//this.showActions=true
				this.selectPost = post
				
				this.$refs.popup.open()
			},
			onSelectAction(even){
				console.log(even)
				
				if(even.type === 'delete')
				{
					this.onDelete(this.selectPost)
				}else{
					console.log(this.$refs)
					console.log(this.$refs.share)
					//this.$refs.share.open()
					this.showShare = true
				}

				this.$refs.popup.close()
				
				// this.selectPost = 
			},
			onShareItem(){
				this.showShare = false
				
				this.qrcodeData = `${this.$settings.post_preview_url_root_h5}${this.$settings.post_preview_uri_h5}?id=${this.selectPost.id}`
				
				this.showQrcode = true
			},
			async updateList(){
				let res = null //this.$localStorage.getItem('posts')
				
				if(!res)
				{
					 //res = await this.$http.get('/common/wx/get_published_list')
					 res = await this.$http.get('/common/wx/posts')
					 //this.$localStorage.setItem('posts',res)
				}

				this.posts = res.data.reverse()
				
				console.log(this.posts)
			},
			back(){
				uni.navigateBack()
			},
			onPreview(post){
				console.log(post)
				uni.navigateTo({
					url: `post-preview?id=${post.id}`
				})
			},
			createPost(){
				uni.navigateTo({
					url: 'publish-form'
				})
			},
			async onDelete(task){
				this.showComfirm = true
				this.comfirmDeleteTask = task
			},
			async comfirmDelete(){
				this.showComfirm = false
				console.log(this.comfirmDeleteTask)
				uni.showLoading({
					title:'正在删除',
					mask: true
				})
				
				await this.$http.post('common/wx/delete_post',{
					id:this.comfirmDeleteTask.id
				})
				
				uni.hideLoading()
				
				this.posts = this.posts.filter((item)=>item.id != this.comfirmDeleteTask.id)
			}
		}
	}
</script>

<style>

</style>
